import React from 'react'
import {Link} from 'react-router'
import Action from '../../../action/action'
import Store from '../../../store/store'
import ReactMixin from 'react-mixin'
import Reflux from 'reflux'

import SideNavBar from '../../../component/sideNavBar/sideNavBar'

export default class MyWallet extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            userWallet : {}
        }
    }
    componentDidMount(){
        Action.getUserWallet(()=>{})
    }
    render(){
        return(
            <div className="myWallet">
                <header>
                    <p>钱包余额(元)</p>
                    <h3>￥{this.state.userWallet.change || 0}</h3>
                </header>
                <section>
                    <Link  to="/my/coupon?0">
                        <div>
                            <div className="img" style={{backgroundImage : `url(${require("../../../images/my/couponIcon.png")})`}}></div>
                            <span>优惠券</span>
                        </div>
                        <p>0张</p>
                    </Link>
                    <Link to="/my/cashCoupon?0">
                        <div>
                            <div className="img" style={{backgroundImage : `url(${require("../../../images/my/cashIcon.png")})`}}></div>
                            <span>现金券</span>
                        </div>
                        <p>0张</p>
                    </Link>
                </section>
                <footer>
                    <ul>
                        <li>
                            <Link to="/my/cash">
                                <span>
                                   <i className="iconfont icon-yue-copy"></i>
                                    <p>提现</p>
                                </span>
                                <i className="iconfont icon-qianjin-copy"></i>
                            </Link>
                        </li>
                        <li>
                            <Link to="/my/bankCard">
                                <span>
                                    <i className="iconfont icon-yinxingqiaguanli"></i>
                                    <p>银行卡管理</p>
                                </span>
                                <i className="iconfont icon-qianjin-copy"></i>
                            </Link>
                        </li>
                        <li>
                            <Link to="/my/payments">
                                <span>
                                    <i className="iconfont icon-yue-copy"></i>
                                    <p>收支管理</p>
                                </span>
                                <i className="iconfont icon-qianjin-copy"></i>
                            </Link>
                        </li>
                    </ul>
                </footer>
                <SideNavBar/>
            </div>
        )
    }
}

ReactMixin.onClass(MyWallet,Reflux.connect(Store))